<script lang="ts" setup>
import {onMounted,ref} from "vue";
import {getyearlist,getyearall,getYearBackList,setNewList} from '@/axios/user'
import {useRouter,useRoute} from 'vue-router'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx';//导入表格插件
let router=useRouter();
let route=useRoute();
let dialogVisible = ref(false)
let dialogVisible1 = ref(false)
//表格数据
const tableData = ref([])

//获取表格数据
let getdata=async()=>{
  let res=await getyearlist()
  console.log(res.data.data)
  if(res.status==200){
      tableData.value=res.data.data
  }
}

//导出exace表
let exaceOut=async()=>{
  console.log('正在导出')
  let res=await getyearall()
  console.log(res.status)
  if (res.status == 200) {
// 1 新建工作簿 XLSX.utils.book_new()
let workbook = XLSX.utils.book_new()
// 处理数据
let newTable = tableData.value.map(item => {
return {
"姓名": item.username,
 "入职时间": item.timeOfEntry,
 "手机号": item.mobile,
 "身份证号": item.idNumber,
 "开户行": item.openingBank,
 "一级部门": item.firstLevelDepartment,
 "二级部门": item.twoLevelDepartment,
 "工作城市": item.workingCity,
"社保电脑号": item.socialSecurityComputerNumber,
"公积金账号": item.providentFundAccount,
"离职时间": item.leaveDate,
 "户籍类型": item.householdRegistrationType,
 "参保城市": item.participatingInTheCity,
 "社保月份": item.socialSecurityMonth,
 "社保合计": item.socialSecurityBase,
 "社保企业": item.socialSecurity,
 "社保个人": item.socialSecurityEnterprise
}
})

// 2 创建工作表
let workSheet = XLSX.utils.json_to_sheet(newTable)
// 3 workSheet添加到workbook中
XLSX.utils.book_append_sheet(workbook, workSheet);
// 4 下载Excel
XLSX.writeFile(workbook, '社保信息表.xlsx', {
bookType: 'xlsx'
})
}
}

//点击归档01报表
let openlodaing=()=>{
  dialogVisible.value=true;
}
//点击确定
let okbink=async()=>{
  let res=await getYearBackList();
  console.log(res)
  if(res.status==200){
    dialogVisible.value=false;
    ElMessage({
      message: '确定!',
      type: 'success',
    })
  }
}

//点击新建报表
let setList=()=>{
  dialogVisible1.value=true;
}

//点击确定
let okSet=async()=>{
  let res=await setNewList();
  if(res.status==200){
    dialogVisible1.value=false;
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    
  }
}



//点击取消，跳转到社保页
let jumpRouter=()=>{
  router.push('/Social')
}


onMounted(()=>{
getdata()//获取社保列表数据
})


</script>

<template>
  <div class="bigBox">
    <el-card style="width:98%">
      <div class="title">
        社保报表
      </div>
      <el-row style="width: 100%;height:60px;display: flex;align-items: center;">
        <el-col :span="22" style="width: 100%;height:60px;display: flex;align-items: center;">
          <div class="classifyBox">
            <p style="background-color:#d2effe"></p>
            <span>已离职</span>
          </div>
          <div class="classifyBox">
            <p style="background-color:#adf8bb"></p>
            <span>在入职</span>
          </div>
          <div class="classifyBox">
            <p style="background-color:#fcdbd7"></p>
            <span>公司合计</span>
          </div>
          <div class="classifyBox">
            <p style="background-color:#fde9c9"></p>
            <span>一级部门</span>
          </div>
          <div class="classifyBox">
            <p style="background-color:#fcfdd5"></p>
            <span>二级部门</span>
          </div>
        </el-col>
        <el-col :span="2">
          <button style="padding:5px 10px;background-color:#3e4bfa;color:#fff;border:none;"
          @click="exaceOut"
          >导出</button>
        </el-col>
      </el-row>
    <el-table :data="tableData" style="width: 100%" id="table">
            <el-table-column prop="userId" label="序号" width="150" />
            <el-table-column prop="username" label="姓名" width="150"/>
            <el-table-column prop="timeOfEntry" label="入职时间" width="150"/>
            <el-table-column prop="mobile" label="手机号" width="150"/>
            <el-table-column prop="idNumber" label=" 身份证号码" width="200"/>
            <el-table-column prop="theHighestDegreeOfEducation" label="学历" width="150"/>
            <el-table-column prop="openingBank" label="开户行" width="150"/>
            <el-table-column prop="firstLevelDepartment" label="一级部门" width="150"/>
            <el-table-column prop="twoLevelDepartment" label="二级部门" width="150"/>
            <el-table-column prop="workingCity" label="工作城市" width="150"/>
            <el-table-column prop="socialSecurityComputerNumber" label="社保电脑号" width="150"/>
            <el-table-column prop="providentFundAccount" label="公积金账号" width="150"/>
            <el-table-column prop="leaveDate" label="离职时间" width="150"/>
            <el-table-column prop="householdRegistrationType" label="户籍类型" width="150"/>
            <el-table-column prop="participatingInTheCity" label="参保城市" width="150"/>
            <el-table-column prop="socialSecurityMonth" label="社保月份" width="150"/>
            <el-table-column prop="socialSecurityBase" label="社保基数" width="150"/>
            <el-table-column prop="socialSecurity" label="社保合计" width="150"/>
            <el-table-column prop="socialSecurityEnterprise" label="社保企业" width="150"/>
            <el-table-column prop="socialSecurityIndividual" label="社保个人" width="150"/>
            <el-table-column prop="providentFundCity" label="公积金城市" width="150"/>
            <el-table-column prop="providentFundMonth" label="公积金月份" width="150"/>
            <el-table-column prop="providentFundBase" label="公积金基数" width="150"/>
            <el-table-column prop="accumulationFundEnterpriseBase" label="公积金企业基数" width="150"/>
            <el-table-column prop="proportionOfProvidentFundEnterprises" label="公积金企业比例" width="150"/>
            <el-table-column prop="individualBaseOfProvidentFund" label="公积金个人基数" width="150"/>
            <el-table-column prop="personalRatioOfProvidentFund" label="公积金个人比例" width="150"/>
            <el-table-column prop="totalProvidentFund" label="公积金合计" width="150"/>
            <el-table-column prop="providentFundEnterprises" label="公积金企业" width="150"/>
            <el-table-column prop="providentFundIndividual" label="公积金个人" width="150"/>
            <el-table-column prop="pensionEnterpriseBase" label="养老企业基数" width="150"/>
            <el-table-column prop="proportionOfPensionEnterprises" label="养老企业比例" width="150"/>
            <el-table-column prop="pensionEnterprise" label="养老企业" width="150"/>
            <el-table-column prop="personalPensionBase" label="养老个人基数" width="150"/>
            <el-table-column prop="personalPensionRatio" label="养老个人比例" width="150"/>
            <el-table-column prop="oldAgeIndividual" label="养老个人" width="150"/>
            <el-table-column prop="unemploymentEnterpriseBase" label="失业企业基数" width="150"/>
            <el-table-column prop="proportionOfUnemployedEnterprises" label="失业企业比例" width="150"/>
            <el-table-column prop="unemployedIndividual" label="失业个人" width="150"/>
            <el-table-column prop="medicalEnterpriseBase" label="医疗企业基数" width="150"/>
            <el-table-column prop="proportionOfMedicalEnterprises" label="医疗企业比例" width="150"/>
            <el-table-column prop="medicalEnterprise" label="医疗企业" width="150"/>
            <el-table-column prop="medicalPersonalBase" label="医疗个人基数" width="150"/>
            <el-table-column prop="medicalPersonalRatio" label="医疗个人比例" width="150"/>
            <el-table-column prop="medicalIndividual" label="医疗个人" width="150"/>
            <el-table-column prop="fertilityEnterpriseBase" label="工伤企业基数" width="150"/>
            <el-table-column prop="proportionOfIndustrialInjuryEnterprises" label="工伤企业比例" width="150"/>
            <el-table-column prop="industrialInjuryEnterprise" label="工伤企业" width="150"/>
            <el-table-column prop="fertilityEnterpriseBase" label="生育企业基数" width="150"/>
            <el-table-column prop="proportionOfFertilityEnterprises" label="生育企业比例" width="150"/>
            <el-table-column prop="childbearingEnterprise" label="生育企业" width="150"/>
            <el-table-column prop="baseOfSeriousIllness" label="大病企业基数" width="150"/>
            <el-table-column prop="proportionOfSeriouslyIllEnterprises" label="大病企业比例" width="150"/>
            <el-table-column prop="bigDiseaseEnterprise" label="大病企业" width="150"/>
            <el-table-column prop="personalBaseOfSeriousIllness" label="大病个人基数" width="150"/>
            <el-table-column prop="personalProportionOfSeriousIllness" label="大病个人比例" width="150"/>
            <el-table-column prop="aPersonOfGreatDisease" label="大病个人" width="150"/>
            <el-table-column prop="providentFundNotes" label="公积金备注" width="150"/>
            <el-table-column prop="socialSecurityNotes" label="社保备注" width="150"/>
  </el-table>
  </el-card>
  <div class="bottomBox">
    <button class="backlist" @click="openlodaing">归档01报表</button>
    <button class="newlist" @click="setList">新建报表</button>
    <button class="nolist" @click="jumpRouter">取消</button>
  </div>
</div>

  <!-- 归档报表弹框 -->
  <el-dialog
    v-model="dialogVisible"
    width="400"
  >
    <span>您确定要归档202301报表?报表归档将覆盖上一次归档记录,无法恢复</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :plain="true"  type="primary" @click="okbink">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新建报表弹框  《》-->
  <el-dialog
    v-model="dialogVisible1"
    width="400"
  >
    <span>您将创建《202302》报表</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button :plain="true"  type="primary" @click="okSet">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style lang="less" scoped>
.bigBox{
  width:100%;
  height:100%;
  background-color:#f0f2f5;
}
.title{
  width:160px;
  height:60px;
  display: flex;
  justify-content: center;
  align-items:end;
  font-weight:bold;
  font-size:20px;
  padding-bottom:10px;
  border-bottom:2px solid;
}
.classifyBox{
 padding:5px 10px;
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  p{
    width:20px;
    height:20px;
  }
  
}
.bottomBox{
  width:100%;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  button{
    padding:6px 10px;
    border:none;
    margin-right:10px;
  }
  .backlist,.newlist{
    background-color:#3e4bfa;
    color:#fff;
  }
  .nolist{
    background-color:#fff;
    border:1px solid #ccc;
  }
}
</style>
